<!doctype html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>电影类别</title>
	
	<link rel="stylesheet" type="text/css" href="./build/css/font-awesome-4.3.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="./build/css/default.css" media="all">
	<link rel="stylesheet" href="./build/css/style2.css" media="all">
	<script src="./build/js/modernizr-custom.js"></script>
	
</head>
<body class="demo-2">
	<div class="container">
		
		<div class="content">
			<div class="grid">
				<div class="grid__item" data-size="280x857">
					<a href="img/original/comedy.jpg" class="img-wrap"><img src="img/thumbs/comedy.jpg" alt="img06" />
						<div class="description description--grid">
							<h3>喜剧</h3>
							<p>这种风格的电影通常有一个幸福的结局（黑色喜剧除外）。其中一个最古老风格的电影，一些早期的无声电影是喜剧。喜剧的目的是通过笑来颂扬美好、进步的事物或理想，讽刺或嘲笑落后现象，在笑声中娱乐和教育观众。喜剧，不像其他电影类型，更加专注于个别的明星，如栋笃笑表演。</p>
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="520x475">
					<a href="img/original/action.jpg" class="img-wrap"><img src="img/thumbs/action.jpg" alt="img07" />
						<div class="description description--grid">
							<h3>动作</h3>
							<p>又称为惊险动作片(Action-Adventure Films)，是以强烈紧张的惊险动作和视听张力为核心的影片类型。具备巨大的冲击力、持续的高效动能、一系列外在惊险动作和事件，常常涉及追逐（徒步和交通工具）、营救、战斗、毁灭性灾难（洪水、爆炸、大火和自然灾害等）、搏斗、逃亡、持续的运动、惊人的节奏速度和历险的角色。</p>
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="220x253">
					
					<a href="img/original/record.jpg" class="img-wrap"><img src="img/thumbs/record.jpg" alt="img04" />	
						<div class="description description--grid">
							<h3>记录</h3>
							<p>一切真实记录社会和自然事物的非虚构的电影片或电视片都是纪录片。纪录片英语为documentary，这个词的意思是文献、公文、证书、证件、凭证等。都有不可伪造的意思。</p>
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="520x520">
					<a href="img/original/love.jpg" class="img-wrap"><img src="img/thumbs/love.jpg" alt="img09" />
						<div class="description description--grid">
							<h3>爱情</h3>
							<p>爱情电影指的是那些中心剧情主要围绕着故事主角恋爱关系发展的电影。这类电影常见的主题是，电影中的角色们基于相互间新发现的魅力而作出相应的决定。这类电影通常也会提出诸如“什么才是我生活的意义”、“我为何与我现在的伴侣在一起”之类的问题。爱情电影代表作品有《少庄主追爱记》《乱世佳人》、《魂断蓝桥》、《罗马假日》 。</p>
							
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="420x420">
					<a href="img/original/dracula.jpg" class="img-wrap"><img src="img/thumbs/dracula.jpg" alt="img10" />
						<div class="description description--grid">
							<h3>恐怖</h3>
							<p>恐怖片是现代大部分人群喜欢的电影,特点就是人心中差异,猖獗尔不脱俗、心灵的脆弱。恐怖电影以恐怖情节和恐怖气氛贯串全片的影片。多以神鬼妖异与现实生活中的人发生纠葛的离奇怪诞情节结构故事，以刺激观众的恐怖感。</p>
							
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="1280x850">
					<a href="img/original/suspense.jpg" class="img-wrap"><img src="img/thumbs/suspense.jpg" alt="img11" />
						<div class="description description--grid">
							<h3>悬疑</h3>
							<p>悬疑电影是指充满悬念，利用电影中人物命运的曲折遭遇、未知的情节的发展变化或者无法看清的结局真相，吸引观众注意力并能引发后续思考和讨论的一种电影类型。通常结局意想不到，让人大呼过瘾。</p>
							
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="580x553">
					<a href="img/original/sin.jpg" class="img-wrap"><img src="img/thumbs/sin.jpg" alt="img01" />
						<div class="description description--grid">
							<h3>犯罪</h3>
							<p>犯罪概念是对犯罪各种内在、外在特征的高度、准确的概括，是对犯罪的内涵和外延的确切、简要的说明。犯罪概念一般分为形式概念、实质概念、混合概念。中国刑法中的犯罪概念是形式与实质相统一的犯罪混合概念。</p>

						</div>
					</a>
				</div>
				<div class="grid__item" data-size="558x580">
					<a href="img/original/cartoon.jpg" class="img-wrap"><img src="img/thumbs/cartoon.jpg" alt="img02" />
						<div class="description description--grid">
							<h3>动画</h3>
							<p>动画是一种综合艺术门类，动画电影指以动画制作的电影。剧场版电影是动画电影的一个分支。从电视动画或OVA取材的称为剧场版或电影动画。我们所说的动画电影包括剧场版和OVA，但是严格意义上的动画电影与剧场版电影动画不同的是动画电影故事取材并不是由电视动画或OVA中取材。</p>
							
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="837x880">
					<a href="img/original/war.jpg" class="img-wrap"><img src="img/thumbs/war.jpg" alt="img03" />
						<div class="description description--grid">
							<h3>战争</h3>
							<p>战争是一种集体和有组织地互相使用暴力的行为。广义来说，并不是只有人类才有战争。蚂蚁和黑猩猩等等少数生物都有战争行为。战争是一种灾难，他给人民带来痛苦和伤害，同时他也是新生物的产生代替旧的体制的一种进步表现。所以全面的战争是要有广义与狭隘之分的。</p>
							
						</div>
					</a>
				</div>
				<div class="grid__item" data-size="1280x961">
					<a href="img/original/science.jpg" class="img-wrap"><img src="img/thumbs/science.jpg" alt="img08" />
						<div class="description description--grid">
							<h3>科幻</h3>
							<p>科幻片是好莱坞类型片的一种，其特色的情节包含了科学奇想。和其它类型片一样，它是随着电影工业化生产而出现的，其人物形象、叙事结构和价值观都有一定的模式。它是被批量化、重复化生产的同类产品，满足了人们在闲暇时对一部“很容易看懂”的娱乐电影的需求。同样也和其它类型片一样，它大量生产的都是平庸之作，但在此基础上，也产生了一些在美学、思想和历史上有价值的经典作品。</p>
						</div>
					</a>
				</div>
				
			</div>
			<!-- /grid -->
			<div class="preview">
				<button class="action action--close"><i class="fa fa-times"></i><span class="text-hidden">Close</span></button>
				<div class="description description--preview"></div>
			</div>
			<!-- /preview -->
		</div>
		<!-- /content -->
		
	</div>
	<!-- /container -->
	
	<script src="./build/js/imagesloaded.pkgd.min.js"></script>
	<script src="./build/js/masonry.pkgd.min.js"></script>
	<script src="./build/js/classie.js"></script>
	<script src="./build/js/main.js"></script>
	<script>
		(function() {
			var support = { transitions: Modernizr.csstransitions },
				// transition end event name
				transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
				transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
				onEndTransition = function( el, callback ) {
					var onEndCallbackFn = function( ev ) {
						if( support.transitions ) {
							if( ev.target != this ) return;
							this.removeEventListener( transEndEventName, onEndCallbackFn );
						}
						if( callback && typeof callback === 'function' ) { callback.call(this); }
					};
					if( support.transitions ) {
						el.addEventListener( transEndEventName, onEndCallbackFn );
					}
					else {
						onEndCallbackFn();
					}
				};

			new GridFx(document.querySelector('.grid'), {
				imgPosition : {
					x : -0.5,
					y : 1
				},
				onOpenItem : function(instance, item) {
					instance.items.forEach(function(el) {
						if(item != el) {
							var delay = Math.floor(Math.random() * 50);
							el.style.WebkitTransition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), -webkit-transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
							el.style.transition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
							el.style.WebkitTransform = 'scale3d(0.1,0.1,1)';
							el.style.transform = 'scale3d(0.1,0.1,1)';
							el.style.opacity = 0;
						}
					});
				},
				onCloseItem : function(instance, item) {
					instance.items.forEach(function(el) {
						if(item != el) {
							el.style.WebkitTransition = 'opacity .4s, -webkit-transform .4s';
							el.style.transition = 'opacity .4s, transform .4s';
							el.style.WebkitTransform = 'scale3d(1,1,1)';
							el.style.transform = 'scale3d(1,1,1)';
							el.style.opacity = 1;

							onEndTransition(el, function() {
								el.style.transition = 'none';
								el.style.WebkitTransform = 'none';
							});
						}
					});
				}
			});
		})();
	</script>
</body>
</html>